<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改密码</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="../../static/js/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="../../static/js/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="../../static/css/index.css">
    <script src="../../static/js/utils.js"></script>
</head>
<body>
<div id="app" style="display: flex;justify-content: center;align-items: center;height: 70vh">
    <div style="width:400px">
        <span>当前用户：{{username}}</span>
        <el-form :model="loginUsersDate" :rules="updatePasswordVerify" ref="updatePassword" label-width="80px" label-position="right" style="margin-top: 20px">
            <el-form-item label="原始密码" prop="rawPassword" required>
                <el-input v-model="loginUsersDate.rawPassword" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="password">
                <el-input type="password" v-model="loginUsersDate.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass" required>
                <el-input type="password" v-model="loginUsersDate.checkPass" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div style="display: flex;justify-content: center;">
            <el-button type="primary" @click="cancel">取消</el-button>
            <el-button type="primary" @click="submitForm">修改</el-button>
        </div>
    </div>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data() {
            var rawPasswordValidator = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.rawPasswordData) {
                    callback(new Error('原始密码错误'));
                } else {
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.loginUsersDate.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                username: localStorage.getItem("username"),
                rawPasswordData:'',
                loginUsersDate: {
                    id: '',
                    loginName:'',
                    rawPassword:'',
                    password: '',
                    checkPass: ''
                },
                updatePasswordVerify: {
                    rawPassword: [
                        {validator: rawPasswordValidator, trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'}
                    ],
                    checkPass: [
                        {validator: validatePass2, trigger: 'blur'}
                    ],
                }
            }
        },
        methods: {
            submitForm(){
                let _this = this;
                addOrUpdateAjax("put","/logintable/updatePassword",_this.loginUsersDate,function (data) {
                    if (data.code == 200) {
                        _this.$message({
                            type: 'success',
                            message: data.msg
                        });
                        localStorage.clear();
                        top.location.href = "/car-sales-vue/html/login/login.html";
                    }else {
                        _this.$message.error(data.msg)
                    }
                })

            },
            cancel(){
                this.$refs['updatePassword'].resetFields();
            },
            selectPassword(){
                let _this = this;
                selectAjax("get", "/logintable/getLoginUserByLoginName/" + localStorage.getItem("username"), null, function (data){
                    if (data.code == 200) {
                        _this.rawPasswordData = data.data.password;
                        _this.loginUsersDate.id = data.data.id;
                        _this.loginUsersDate.loginName = data.data.loginName;
                    }
                })
            }
        },
        mounted() {
            this.selectPassword();
        }
    })
</script>
</body>
</html>